<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Emotion Recognition Result</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #d0f0c0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            display: flex;
            justify-content: space-between;
            width: 1000px;
            height: 500px;
            border-radius: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #f9f9f9;
            border: 2px solid black;
        }

        .window {
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        #image-window {
            flex-basis: 60%;
            border-right: 2px solid black;
        }

        #result-window {
            flex-basis: 40%;
        }

        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
        }

        .window h1 {
            margin-top: 0;
        }

        #image-window img {
            max-width: 82%;
            max-height: 82%;
        }

        .emoji {
            font-size: 140px;
            margin-top: 32px;
        }

        .emotion-label {
            font-size: 22px;
            margin-top: 24px;
            color: #333;
        }

        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 25px;
        }

        .return-button, .exit-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: #fff;
            text-decoration: none;
            border-radius: 6px;
            margin-right: 10px;
        }
        .emotion-probability {
            opacity: 0.96;
            position: absolute; /* 或者其他适合您布局的定位方式 */
            display: none; /* 默认隐藏 */

    /* 其他样式，如宽度、高度、背景、边框等 */
        }
        .emotion-probability.visible {
            display: block; /* 鼠标移上去时显示 */
           }
    </style>
</head>

<body>
    <div class="container">
        <div class="window" id="image-window">
            <h1>EEG Emotion Visualization</h1>
            <img src="{{ image_url }}" alt="Emotion Image">
        </div>

        <div class="window" id="result-window">
            <h1>Emotion Recognition Result</h1>
            <div class="emoji" onmouseover="showProbability(true)" onmouseout="showProbability(false)">
                {% if emotion == 'Positive' or emotion == 'Happy' %}
                    😀
                {% elif emotion == 'Negative' %}
                    😢
                {% elif emotion == 'Neutral' or emotion == 'Not happy' %}
                    😐
                {% endif %}
            </div>
            <div class="emotion-probability" id="emotion-probability-container">
                <!-- 这里将动态插入识别概率的图片 -->
            </div>
            <div class="emotion-label">
                Emotion: {{ emotion.capitalize() }}
            </div>
            <div class="button-container">
                <a href="/upload" class="return-button">Back</a>
                <a href="/login" class="exit-button">Exit</a>
            </div>
        </div>
    </div>

   <script>
        function showProbability(show) {
    var probabilityContainer = document.getElementById('emotion-probability-container');
    if (show) {
        // 获取识别概率的图片URL
        var imageUrl = getProbabilityImageUrl(); // 实现这个函数
        probabilityContainer.innerHTML = '<img src="' + imageUrl + '" alt="Emotion Recognition Probability">';
        probabilityContainer.classList.add('visible'); // 显示容器
    } else {
        probabilityContainer.innerHTML = ''; // 清空容器内容
        probabilityContainer.classList.remove('visible'); // 隐藏容器
    }
}

// 假设的获取识别概率图片URL的函数（需要您实现）
function getProbabilityImageUrl() {
    // 示例：从某个数据源获取URL，这里只是一个占位符
    return 'images/预测结果.png';
}
    </script>

</body>
</html>
